<template>
    <div class="personalHome">
        <Personal-Header bgColor="#5741d9"></Personal-Header>
        <Personal-Side></Personal-Side>
        <div class="content">
            <h2 class="pagetitle">{{$t('l.personal_95')}}</h2>
            <div class="personCon">
                <div class="leftpanel">
                    <h2 class="persontitle">{{$t('l.personal_122')}}</h2>
                    <div class="resetpsdbar clearfix" style="width:612px;text-align:center;" v-if="intro.verifiedLevel==2 || intro.verifiedStatus!=3">
                        <img src="../../assets/images/c3img.png">
                        <p class="c3tip">{{$t('l.personal_123')}}</p>
                    </div>
                    <!--认证成功-->
                    <div class="resetpsdbar" v-else>
                        <div class="bindsuc" style="padding-top: 0;">
                            <img style="padding-top:100px;" src="../../assets/images/sucico.png">
                            <h2>{{$t('l.personal_124')}}！</h2>
                        </div>
                    </div> 
                </div>
                <div class="rightpanel">
                    <div class="authpabel">
                        <h2>{{$t('l.add_149')}}</h2>
                        <div class="authintro">
                            <div class="isAuth active"><i></i>{{$t('l.add_10')}}</div>
                            <p class="permission">- {{$t('l.personal_100')}} -</p>
                            <p class="permission">- {{$t('l.personal_101')}} -</p>
                        </div>
                    </div>
                    <div class="authpabel">
                        <h2>{{$t('l.add_150')}}</h2>
                        <div class="authintro">
                            <div class="isAuth active"><i></i>{{$t('l.add_10')}}</div>
                            <p class="permission">- {{$t('l.personal_103')}} -</p>
                            <p class="permission">- {{$t('l.personal_104')}} -</p>
                        </div>
                    </div>
                    <div class="authpabel">
                        <h2>{{$t('l.personal_105')}}</h2>
                        <div class="authintro">
                            <div class="isAuth" :class="intro.verifiedLevel==3?'active':''"><i></i>{{intro.verifiedStatus==3 && intro.verifiedLevel==3?$t('l.add_83'):$t('l.personal_4')}}</div>
                            <p class="permission">- {{$t('l.personal_107')}} -</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import PersonalHeader from "@/components/personalHeader";
import PersonalSide from "@/components/personalSide";
import {api} from '@/api/api';
export default {
    components: {
        PersonalHeader,
        PersonalSide
    },
    created(){
        this.baseinfo();
    },
    data(){
        return {
            intro:""
        }
    },
    methods:{
        //基本信息
        async baseinfo(){
            let that = this;
            let res = await api.baseinfo()
            if(res.data.code==0){
                that.intro = res.data.data.info;
            }else{
                that.$layer.msg(res.data.msg);
            }
        }
    },
    mounted() {
        
    }
}
</script>
<style lang="less">
.personalHome {
	padding-top: 100px;
}
.personCon{
    padding:24px 30px;
    box-sizing: border-box;
    height: 90%;
    .rightpanel{
        .authpabel{
            border-radius:9px;
            border:1px solid rgba(233,238,244,1);
            overflow:hidden;
            margin-top:-10px;
            &:first-child{
                margin-top:0;
            }
            &:last-child{
                .authintro{
                    height:132px;
                    .permission{
                        margin-top:10px;
                    }
                }
            }
            h2{
                height:50px;
                background:rgba(249,249,255,1);
                border-bottom:1px solid rgba(233,238,244,1);
                line-height:50px;
                text-align:center;
                font-size:16px;
                font-familyA:"PingFangSC-Medium";
                font-weight:500;
                color:rgba(51,56,94,1);
            }
            .authintro{
                padding-top:16px;
                height:185px;
                box-sizing: border-box;
                text-align:center;
                .isAuth{
                    height:34px;
                    padding:0 12px 0 18px;
                    text-align:center;
                    background:rgba(243,245,255,1);
                    border-radius:4px;
                    border:1px solid #2D8DFE;
                    font-size:14px;
                    font-weight:400;
                    color:#2D8DFE;
                    line-height:34px;
                    display:inline-block;
                    margin-bottom:15px;
                    i{
                        display:inline-block;
                        vertical-align:middle;
                        width:16px;
                        height:19px;
                        margin-right:10px;
                        background:url(../../assets/images/authFalse.png) no-repeat center;
                    }
                    &.active{
                        background:rgba(246,255,237,1);
                        border:1px solid rgba(183,235,143,1);
                        color:#52C41A;
                        i{
                            background:url(../../assets/images/authTrue.png) no-repeat center;
                        }
                    }
                    &.authing{
                        background:rgba(255,251,230,1);
                        border:1px solid rgba(255,229,143,1);
                        color:#F78900;
                        i{
                            background:url(../../assets/images/authing.png) no-repeat center;
                        }
                    }
                }
                p{
                    font-size:14px;
                    font-weight:400;
                    color:rgba(51,56,94,1);
                    line-height:20px;
                    text-align:center;
                    padding-bottom:9px;
                }
            }
        }
    }
    .leftpanel{
        .resetpsdbar{
            width:518px;
            margin:58px auto;
            .title{
                font-size:14px;
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:20px;
                padding-bottom:5px;
            }
            .c3tip{
                font-size:16px;
                font-familyA:"PingFangSC-Medium";
                font-weight:500;
                color:rgba(51,56,94,1);
                line-height:32px;
                width:384px;
                margin:21px auto;
            }
        }
    }
}
</style>



